<template>
    <ValidateForm @form-submit="onSubmit">
        <div class="mb-3 text-left">
            <label for="exampleInputEmail1" class="form-label">邮箱地址</label>
            <ValidateInput placeholder="请输入邮箱" v-model="formData.emailVal" :rules="emailRules" />
        </div>
        <div class="mb-3 text-left">
            <label for="exampleInputEmail1" class="form-label">昵称</label>
            <ValidateInput placeholder="请输入昵称" v-model="formData.nickNameVal" :rules="nickNameRules" />
        </div>
        <div class="mb-3 text-left">
            <label for="exampleInputPassword1" class="form-label">密码</label>
            <ValidateInput placeholder="请输入密码" type="password" v-model="formData.passwordVal" :rules="passwordRules" />
        </div>
        <div class="mb-3 text-left">
            <label for="exampleInputPassword1" class="form-label">重复密码</label>
            <ValidateInput placeholder="请再次输入密码" type="password" v-model="formData.againPasswordVal" :rules="againPasswordRules" />
        </div>
        <template #submit>
            <button type="submit" class="btn btn-primary">注册</button>
        </template>
    </ValidateForm>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import ValidateInput, { RulesProp } from "@/components/ValidateInput.vue";
import ValidateForm from "@/components/ValidateForm.vue";
import { register } from "@/api/user";
import createMessage from "@/components/createMessage";
import { useRouter } from "vue-router";
export default defineComponent({
    components: {
        ValidateInput,
        ValidateForm,
    },
    setup() {
        const formData = reactive({
            emailVal: "",
            nickNameVal: "",
            passwordVal: "",
            againPasswordVal: "",
        });
        const emailRules: RulesProp[] = [
            {
                type: "required",
                message: "邮箱不能为空",
            },
            {
                type: "email",
                message: "邮箱格式不合法",
            },
        ];
        const passwordRules: RulesProp[] = [{ type: "required", message: "请输入密码" }];
        const nickNameRules: RulesProp[] = [{ type: "required", message: "昵称不能为空" }];
        const againPasswordRules: RulesProp[] = [
            { type: "required", message: "请输入密码" },
            {
                type: "custom",
                message: "两次密码不一致",
                validator: () => formData.passwordVal == formData.againPasswordVal,
            },
        ];
        const router = useRouter();
        const onSubmit = result => {
            if (result) {
                const { emailVal: email, nickNameVal: nickName, passwordVal: password } = formData;
                register({ email, nickName, password }).then(res => {
                    if (res.code === 0) {
                        createMessage("注册成功，2S后跳转登录", "success");
                        setTimeout(() => {
                            router.push("/login");
                        }, 2000);
                    }
                });
            }
        };
        return { onSubmit, passwordRules, nickNameRules, emailRules, againPasswordRules, formData };
    },
});
</script>

<style scoped lang="scss"></style>
